<template>
  <div>
    <div id="select" v-if="!isShowSet">
      <p>
        <van-button @click="set" type="danger">价格设置</van-button>
      </p>
      <p>
        <van-button @click="work" type="primary">进库/结算</van-button>
      </p>
      <p>
        <van-button @click="clientele" type="warning">客户管理</van-button>
      </p>
      <p>
        <van-button @click="stat" type="info">统计</van-button>
      </p>
    </div>

    <div id="operation" v-if="isShowSet">
      <van-nav-bar title="价格设置" left-text="返回" left-arrow @click-left="onClickLeft" />
      <van-cell-group>
        <van-number-keyboard extra-key="." close-button-text="完成" theme="custom" :show="keyShow" :maxlength="6" @blur="keyShow = false"
          @input="onInput" @delete="onDelete" @hide="onHide" />
        <div class="van-hairline--bottom font">14.5KG</div>
        <van-field readonly require size="large" label="出站价格" placeholder="元" v-model="price.middle_in" data-type='middle_in'
          @click="KeyboardUp" />
        <van-field readonly require size="large" label="零售价格" placeholder="元" v-model="price.middle_out" data-type='middle_out'
          @click="KeyboardUp" />
        <div class="van-hairline--bottom font">5KG</div>
        <van-field readonly size="large" label="出站价格" placeholder="元" v-model="price.min_in" data-type='min_in' @click="KeyboardUp" />
        <van-field readonly size="large" label="零售价格" placeholder="元" v-model="price.min_out" data-type='min_out'
          @click="KeyboardUp" />
        <div class="van-hairline--bottom font">1KG(公斤数)</div>
        <van-field readonly size="large" label="出站价格" placeholder="元" v-model="price.each_in" data-type='each_in'
          @click="KeyboardUp" />
        <van-field readonly size="large" label="零售价格" placeholder="元" v-model="price.each_out" data-type='each_out'
          @click="KeyboardUp" />
        <div class="van-hairline--bottom font">退气</div>
        <van-field readonly size="large" label="价格" placeholder="元" v-model="price.refund" data-type='refund' @click="KeyboardUp" />
        <div class="van-hairline--bottom font">新瓶</div>
        <van-field readonly size="large" label="价格" placeholder="元" v-model="price.allnew" data-type='allnew' @click="KeyboardUp" />
      </van-cell-group>
      <p>
        <van-button @click="save" type="primary">确定</van-button>
      </p>
      <div id="occupy"></div>
    </div>
  </div>
</template>

<script>
  //加载common.js
  //import 'common.js'
  export default {
    data() {
      return {
        isShowSet: false,
        keyShow: false,
        price: {
          middle_in: 0,
          middle_out: 0,
          min_in: 0,
          min_out: 0,
          allnew: 0,
          refund: 0,
          each_in: 0,
          each_out: 0,
        },
        diffType: 'middle_in'
      }
    },
    computed: {},
    watch: {
      'price.middle_in': {
        handler(val, oldVal) {
          if (oldVal == 0 || val == 0 || val == '') {
            return
          }
          console.log('chufal')
          this.price.middle_in = val
          this.price.min_in = this.$help.Math.cheng(this.$help.Math.chu(this.price.middle_in, 14), 5).toFixed(2)
          this.price.min_out = this.$help.Math.jia(this.$help.Math.cheng(this.$help.Math.chu(this.price.middle_in, 14),
              5),
            9).toFixed(2)
          this.price.each_in = this.$help.Math.chu(this.price.middle_in, 14.5).toFixed(2)
          this.price.refund = this.$help.Math.cheng(this.$help.Math.chu(this.price.middle_in, 14.5), -1).toFixed(2)
        },
        immediate: true,
        deep: true
      },
      'price.middle_out': {
        handler(val, oldVal) {
          if (oldVal == 0 || val == 0 || val == '') {
            return
          }
          console.log('chufal2')
          this.price.middle_out = val
          this.price.each_out = this.$help.Math.chu(this.price.middle_out, 14.5).toFixed(2)
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      const _this = this
      this.$help.Request.get('/fule').then(res => {
        _this.price.middle_in = res['data'][1]['cost']
        _this.price.middle_out = res['data'][1]['pricing']
        _this.price.min_in = res['data'][2]['cost']
        _this.price.min_out = res['data'][2]['pricing']
        _this.price.each_in = res['data'][3]['cost']
        _this.price.each_out = res['data'][3]['pricing']
        _this.price.refund = res['data'][4]['pricing']
        _this.price.allnew = res['data'][5]['pricing']
        _this.$help.Cache('price', res['data'], 3600)
      })
      // this.initA()
      // this.$help.Request.get('/fule/clientele').then(res => {
      //   _this.$help.Cache('clientele', res['data'], 3600)
      // })
    },
    methods: {
      onClickLeft() {
        this.isShowSet = false
      },
      set() {
        this.isShowSet = true
      },
      KeyboardUp(ev) {
        this.keyShow = true;
        this.diffType = ev.target.dataset.type;
        if (this.diffType == 'allnew') {
          this.$el.querySelector("#occupy").style.height = 140 + 'px'
        }
      },
      onInput(value) {
        this.price[this.diffType] = `${this.price[this.diffType]}${value}`;
      },
      onDelete() {
        const value = this.price[this.diffType].toString();
        if (Number(value.slice(0, value.length - 1)) === 0) {
          this.price[this.diffType] = '';
        } else {
          this.price[this.diffType] = Number(value.slice(0, value.length - 1));
        }
      },
      onHide() {
        this.$el.querySelector("#occupy").style.height = 0 + 'px'
      },
      save() {
        const _this = this
        let price = localStorage.getItem("price")
        price = JSON.parse(price)
        price[1]['cost'] = _this.price.middle_in
        price[1]['pricing'] = _this.price.middle_out
        price[2]['cost'] = _this.price.min_in
        price[2]['pricing'] = _this.price.min_out
        price[3]['cost'] = _this.price.each_in
        price[3]['pricing'] = _this.price.each_out
        price[4]['pricing'] = _this.price.refund
        price[5]['pricing'] = _this.price.allnew
        _this.$help.Request.put('/fule', price).then(res => {
          _this.$help.Message.hint(res['msg'])
          _this.isShowSet = false
        })
      },
      work() {
        this.$router.push('/entrepot')
      },
      clientele() {
        this.$router.push('/clientele')
      },
      stat() {
        alert("stat")
      },
    }
  }
</script>

<style>
  #select button {
    font-size: 1.1rem;
    width: 9rem;
    height: 2.6rem;
  }

  #operation {
    font-size: 0.35rem;
  }

  #operation button {
    font-size: 0.45rem;
    width: 9rem;
  }

  #operation .font {
    font-size: 0.8rem;
    text-align: left;
    padding-left: 5px;
  }

  #occupy {
    height: 0px;
    background-color: #fff;
  }
</style>
